<template>
  <div class="wrapper-jsc">
    <div class="regionName-box">
      <el-form :inline="true" :model="listQuery">
        <el-form-item label="年">
          <el-date-picker
          width='50%'
            v-model="listQuery.year"
           type="year"
            value-format="yyyy"
           
            placeholder="选择年"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item class="month-jsc" label="月份">
          <el-select filterable
            v-model="listQuery.month"
            placeholder="月"
            @change="fetchData()"
          >
            <el-option label="全部" value="0"></el-option>
            <el-option label="1月" value="1"></el-option>
            <el-option label="2月" value="2"></el-option>
            <el-option label="3月" value="3"></el-option>
            <el-option label="4月" value="4"></el-option>
            <el-option label="5月" value="5"></el-option>
            <el-option label="6月" value="6"></el-option>
            <el-option label="7月" value="7"></el-option>
            <el-option label="8月" value="8"></el-option>
            <el-option label="9月" value="9"></el-option>
            <el-option label="10月" value="10"></el-option>
            <el-option label="11月" value="11"></el-option>
            <el-option label="12月" value="12"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
    </div>
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="合同数量及金额" name="first">
        <el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
          <el-col
            :xs="{span: 24}"
            :sm="{span: 24}"
            :md="{span: 24}"
            :lg="{span: 16}"
            :xl="{span: 16}"
          >
            <div class="newcontract-wrapper">
              <el-table
                :data="list"
                style="width: 100%;margin-bottom: 20px;"
              highlight-current-row
                row-key="contractNumber"
                border
                class="childre-table"
              
                :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
              >
                <el-table-column prop="regionName"  align='center' label="战区"  ></el-table-column>
                <el-table-column prop="contractNumber" label="合同数量" align='center'   width="180"></el-table-column>
                <el-table-column prop="contractAmount" label="合同金额"  align='center'  ></el-table-column>
                <el-table-column prop="contractAmount" label="目标金额" align='center'  ></el-table-column>
                <el-table-column prop="contractAmount" label="差额" align='center'  ></el-table-column>
              </el-table>
            </div>
          </el-col>

          <el-col
            :xs="{span: 24}"
            :sm="{span: 24}"
            :md="{span: 24}"
            :lg="{span: 8}"
            :xl="{span: 8}"
          >
            <div class="chart-wrapper">
               <pie-chart ref="peiChart" :listQuery="this.listQuery" />
            </div>
          </el-col>
        </el-row>
      </el-tab-pane>
      <el-tab-pane label="周期回款" name="second">
        <div class="chart-wrapper zq-box">
          <bar-chart  :listQuery="this.listQuery" />
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
import { getNewSignData } from "@/api/admin_jsc";
import PieChart from "./components/PieChart";
import BarChart from "./components/BarChart";
export default {
  data() {
    return {
      showbtns: false,
      activeName: "first",
      value1: "",
      value2: "",
      value3: "",
      list: [],
       listQuery: {
        year: "2020",
        month: '0',
      },
      
      
     
    };
  },
  components: {
    PieChart,
    BarChart,
  },
  created() {
    this.fetchData();
  },
 methods: {
    
    handleClick(tab, event) {
      console.log(tab, event);
    },
    fetchData() {
      getNewSignData(this.listQuery).then((response) => {
        this.list = response.data.data;
        this.$nextTick(() => {
            if (this.list.length) {
              this.$refs.list.setCurrentRow(this.list[0]);
            }
          })
           this.$refs.peiChart.getList();
      });
      
    },
  },
};
</script>
<style lang="scss" scoped>

.wrapper-jsc {
  position: relative;
  .regionName-box {
    position: absolute;
    right: 0;
    top: 0;
    z-index: 99;
    .el-date-editor.el-input{
          width: 110px;
    }
    .el-select{
      width: 100px;
    }
  }
}
.zq-box {
  margin-top: 24px;
  margin-bottom: 24px;
}
 .el-table .warning-row {
    background: oldlace;
  }
</style>